<template>
  <div class="n-register">
    <van-nav-bar :title="header" left-arrow @click-left="onClickLeft"/>
    <div class="dph-order-date">
      <p>仅支持开始时间起30日内的查询</p>
    </div>
    <div class="dph-order-list">
      <div class="dph-order-list-item van-hairline--bottom">
        <van-row>
          <van-col :offset="1" :span="5">
            <p>开始时间</p>
          </van-col>
          <van-col :offset="1" :span="15">
            <van-field v-model="startTime" @focus="startTimePicker" placeholder="请选择开始时间"/>
          </van-col>
          <van-col :span="2">
            <van-icon name="arrow"></van-icon>
          </van-col>
        </van-row>
      </div>
      <div class="dph-order-list-item van-hairline--bottom">
        <van-row>
          <van-col :offset="1" :span="5">
            <p>截止时间</p>
          </van-col>
          <van-col :offset="1" :span="15">
            <van-field v-model="endTime" @focus="endTimePicker" placeholder="请选择截止时间"/>
          </van-col>
          <van-col :span="2">
            <van-icon name="arrow"></van-icon>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="dph-content-btn">
      <button class="dph-content-button" type="button" @click="submitQuery">查询</button>
    </div>
    <van-popup v-model="startShow" position="bottom" :overlay="true">
      <van-datetime-picker @confirm="handleStartDate" @cancel="startShow = false" v-model="startDate" type="datetime"
                           :min-date="minDate"
                           :max-date="maxDate"/>
    </van-popup>
    <van-popup v-model="endShow" position="bottom" :overlay="true">
      <van-datetime-picker @confirm="handleEndDate" @cancel="endShow = false" v-model="endDate" type="datetime"
                           :min-date="minDate" :max-date="maxDate"/>
    </van-popup>
  </div>
</template>

<script>
  import {
    Icon,
    Row,
    Field,
    Col,
    Uploader,
    Loading,
    Cell,
    CellGroup,
    Popup,
    Button,
    NavBar,
    Toast,
    Actionsheet,
    DatetimePicker
  } from 'vant';

  export default {
    name: 'collectionRecord',
    components: {
      [Loading.name]: Loading,
      [Toast.name]: Toast,
      [Button.name]: Button,
      [Icon.name]: Icon,
      [Uploader.name]: Uploader,
      [Row.name]: Row,
      [Col.name]: Col,
      [Cell.name]: Cell,
      [DatetimePicker.name]: DatetimePicker,
      [Popup.name]: Popup,
      [Field.name]: Field,
      [Actionsheet.name]: Actionsheet,
      [CellGroup.name]: CellGroup,
      [NavBar.name]: NavBar,
      [Button.name]: Button
    },
    data() {
      return {
        header: '自定义查询',
        startTime: '',
        endTime: '',
        startShow: false,
        endShow: false,
        startDate: new Date(),
        endDate: new Date(),
        minDate: new Date(2018, 1, 1),
        maxDate: new Date(2020, 12, 31)
      };
    },
    methods: {
      onClickLeft() {
        this.$router.push('collectionRecord');
      },

      startTimePicker(e) {
        e.preventDefault();
        this.startShow = true;
      },

      endTimePicker(e) {
        e.preventDefault();
        this.endShow = true;
      },

      formatter(date) {
        const d = new Date(date);
        const year = d.getFullYear();
        const month = change(d.getMonth() + 1);
        const day = change(d.getDate());
        const hour = change(d.getHours());
        const minute = change(d.getMinutes());
        const second = change(d.getSeconds());

        function change(t) {
          if (t < 10) {
            return '0' + t;
          } else {
            return t;
          }
        }

        return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
      },

      handleStartDate(value) {
        this.startTime = this.formatter(value);
        this.startShow = false;
      },

      handleEndDate(value) {
        this.endTime = this.formatter(value);
        this.endShow = false;
      },

      submitQuery() {
        console.log(this.startTime);
        console.log(this.endTime);
        this.$router.push('collectionRecordCopy');
      }
    }
  };
</script>
<style lang="less" scoped>
  .dph-order-date {
    p {
      margin: 0;
      height: .82rem;
      line-height: .82rem;
      padding-left: .3rem;
      color: #999;
      font-size: 11px;
    }
  }

  .dph-content-btn {
    height: 1.7rem;
    line-height: 1.7rem;
    text-align: center;
    background: #fff;
    .dph-content-button {
      display: inline-block;
      width: 4.8rem;
      height: .9rem;
      line-height: .9rem;
      text-align: center;
      color: #fff;
      font-size: 14px;
      border-radius: 3px;
      background: #2F66F3;
      border: none;
    }
  }

  .dph-order-list {
    p {
      margin: 0;
    }
    .dph-order-list-item {
      height: 1rem;
      line-height: 1rem;
      background: #fff;
      .van-row {
        .van-col:nth-child(1) {
          p {
            color: #333333;
            font-size: 14px;
            font-weight: 400;
          }
        }
        .van-col:nth-child(2) {
          /*padding-top: .15rem;*/
          p {
            color: #000;
            font-size: 14px;
            font-weight: 400;
          }
        }
        .van-col:nth-child(3) {
          color: #666;
          font-size: 13px;
          .van-icon {
            top: 1px;
          }
        }
      }
    }
  }
</style>
